<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
        <style type="text/css">
        body {
            font-family: "Helvetica", "Arial", serif;
            color: #333;
            background-color: #ccc;
            margin: 1em 10%;
        }

        h1 {
            color: #333;
            background-color: transparent;
        }

        a {
            color: #c60;
            background-color: transparent;
            font-weight: bold;
            text-decoration: none;
        }

        ul {
            padding: 0;
        }

        li {
            float: left;
            padding: 1em;
            list-style: none;
        }

        #imagegallery {}

        #imagegallery a {
            margin: 0px 20px 20px 0px;
            padding: 0px;
            display: inline;
        }

        #imagegallery a img {
            border: 0;
        }
    </style>
</head>
<body>
    <h2>
        美女画廊
    </h2>

    <div id="imagegallery">
        <a href="images/1.jpg" title="美女A">
            <img src="images/1-small.jpg" width="100px" alt="美女1" />
        </a>
        <a href="images/2.jpg" title="美女B">
            <img src="images/2-small.jpg" width="100px" alt="美女2" />
        </a>
        <a href="images/3.jpg" title="美女C">
            <img src="images/3-small.jpg" width="100px" alt="美女3" />
        </a>
        <a href="images/4.jpg" title="美女D">
            <img src="images/4-small.jpg" width="100px" alt="美女4" />
        </a>
    </div>

    <div style="clear:both"></div>

    <img id="image" src="images/placeholder.png" alt="" width="450px" />

    <p id="des">选择一个图片</p>
    
    <script>
        var imagegallery = document.getElementById("imagegallery");
        var links = imagegallery.getElementsByTagName("a");
        var pic = document.getElementById("image");
        var words = document.getElementById("des");
    for(var i = 0;i<=links.length-1;i++){
        links[i].onclick = function (){
            pic.src=this.href;
            words.innerText=this.title;
            return false;
        }
    }   
    </script>   
</body>
</html>